<!--
 * @Description: 自定义表单数据展示
 * @Author: Li Yujie
 * @Date: 2021/05/15
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/05/15
-->
<template>
    <section class="wrapper">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-position="top"
        >
            <div
                class="question-item"
                v-for="(item, index) in ruleForm.data"
                :key="index"
                :style="{pointerEvents: fromType === 'shop' ? 'none' : ''}"
            >
                <!-- 单行文本 -->
                <el-form-item
                    :label="`${index + 1}、${item.title}`"
                    :class="item.required ? 'is-required' : ''"
                    v-if="item.type === 1"
                    :prop="`data[${index}].default.value`"
                    :rules="[
                        {pattern: rulesFilter(item.value_validation_rule).reg, message: rulesFilter(item.value_validation_rule).message, trigger: 'blur'},
                        {required: item.required === 1, message: '表单内容不可以为空', trigger: 'blur'}
                    ]"
                >
                    <el-input
                        v-model="item.default.value"
                        placeholder="请输入..."
                        size="large"
                        clearable
                        :disabled="fromType === 'shop'"
                    />
                </el-form-item>

                <!-- 多行文本 -->
                <el-form-item
                    :label="`${index + 1}、${item.title}`"
                    :class="item.required ? 'is-required' : ''"
                    v-if="item.type === 6"
                    :prop="`data[${index}].default.value`"
                    :rules="[
                        {pattern: rulesFilter(item.value_validation_rule).reg, message: rulesFilter(item.value_validation_rule).message, trigger: 'blur'},
                        {required: item.required === 1, message: '表单内容不可以为空', trigger: 'blur'}
                    ]"
                >
                    <el-input
                        v-model="item.default.value"
                        placeholder="请输入..."
                        type="textarea"
                        size="large"
                        clearable
                        :disabled="fromType === 'shop'"
                        :autosize="{ minRows: 4, maxRows: 6}"
                    />
                </el-form-item>

                <!-- 单选题 -->
                <el-form-item
                    :label="`${index + 1}、${item.title}`"
                    :class="item.required ? 'is-required' : ''"
                    v-if="item.type === 2"
                >
                    <div
                        class="options-item"
                        v-for="(option, key) in item.options"
                        :key="key"
                    >
                        <el-radio
                            v-model="item.default.value"
                            :label="option.value"
                            :disabled="fromType === 'shop' && !option.default_selected"
                            @change="handleChangeRadio(option, item)"
                        >
                            <span :style="{color: option.default_selected ? '' : '#666' }">{{ option.title }}</span>
                            <el-input
                                v-model="option.default_edit_content"
                                v-if="option.option_type === 2"
                                :value="option.default_edit_content ? option.default_edit_content : ''"
                                :disabled="item.default.value !== option.value || fromType=== 'shop'"
                                placeholder="请输入..."
                                size="large"
                                :style="{
                                    flex: 1,
                                    backgroundColor: 'rgba(247, 247, 247, 1)',
                                    color: 'rgba(102, 102, 102, 1)',
                                    marginLeft: '12px'
                                }"
                            />
                        </el-radio>
                    </div>
                </el-form-item>

                <!-- 多选题 -->
                <el-form-item
                    :label="`${index + 1}、${item.title}`"
                    :class="item.required ? 'is-required' : ''"
                    v-if="item.type === 3"
                >
                    <div
                        class="options-item"
                        v-for="(option, key) in item.options"
                        :key="key"
                    >
                        <el-checkbox
                            v-model="option.default_selected"
                            :label="true"
                            :disabled="!option.default_selected && fromType=== 'shop'"
                        >
                            <span :style="{color: option.default_selected ? '' : '#666' }">{{ option.title }}</span>
                            <el-input
                                v-model="option.default_edit_content"
                                v-if="option.option_type === 2"
                                :value="option.default_edit_content ? option.default_edit_content : ''"
                                :disabled="!option.default_selected || fromType=== 'shop'"
                                placeholder="请输入..."
                                size="large"
                                :style="{
                                    flex: 1,
                                    backgroundColor: 'rgba(247, 247, 247, 1)',
                                    color: 'rgba(102, 102, 102, 1)',
                                    marginLeft: '12px'
                                }"
                            />
                        </el-checkbox>
                    </div>
                </el-form-item>
            </div>
        </el-form>
        <!-- 图片预览 -->
        <img-preview ref="preview"/>
        <!-- 视频预览 -->
        <video-simple
            ref="videoSimple"
            :url="video_url"
            :top="54"
            :left="left"
        />
    </section>
</template>

<script>
import ImgPreview from "@/components/common/img-preview";
import VideoSimple from "@/components/dorm/video-simple";

export default {
    name: "CustomFormData",
    components: {VideoSimple, ImgPreview},
    props: {
        data: {
            type: Array,
            required: true
        },
        fromType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            ruleForm: {
                data: []
            },
            rules: {},
            video_url: '',
            left: 0
        };
    },
    watch: {
        data: {
            handler(val) {
                this.ruleForm.data = val;
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        /*
        * @description 多图预览
        */
        handlePreviewImg(row, index) {
            let images = row.reduce((cur, next) => {
                cur.push(next.value);
                return cur;
            }, []);

            this.$refs.preview.show(images, index);
        },


        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * @description 播放视频
         */
        playVideo(row, index) {
            this.left = document.querySelector('#playVideo' + index).getClientRects()[0].x - 278 - 40;
            this.video_url = row.video_url;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * 正则校验
         * @param type
         * @returns {{reg: RegExp, message: string}|string}
         */
        rulesFilter(type) {
            switch (type) {
                case 'text':
                    return {
                        reg: /^[\u4e00-\u9fa5]{0,}$/img,
                        message: '输入内容必须为汉字',
                    };
                case 'number':
                    return {
                        reg: /^[0-9]+$/img,
                        message: '输入内容必须为数字',
                    };
                case 'alphabet':
                    return {
                        reg: /^[A-Za-z]+$/img,
                        message: '输入内容必须为英文',
                    };
                case 'phone':
                    return {
                        reg: /^(?:(?:\+|00)86)?1\d{10}$/,
                        message: '手机号码格式不正确',
                    };
                case 'email':
                    return {
                        reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/img,
                        message: '邮箱格式输入不正确',
                    };
                case 'url':
                    return {
                        reg: /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/,
                        message: '网址格式不正确',
                    };
                case 'id_number':
                    return {
                        reg: /^\d{15}|\d{18}$/img,
                        message: '身份证号码格式不正确',
                    };
                default:
                    return '';
            }
        },

        /**
         * @description 单选数据处理
         */
        handleChangeRadio (el, row) {
            if(el.option_type === 1) {
                this.$set(row.default, 'value_type', 1);
            }
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-form {
        .question-item {
            margin-bottom: 42px;
            .el-form-item {
                &__label {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 22px;;
                    margin-bottom: 6px;
                }
                .options-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 12px;
                    height: 40px;
                    .el-radio {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        &__label {
                            flex: 1;
                            display: flex;
                            align-items: center;
                        }
                    }
                    .el-checkbox {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        &__label {
                            flex: 1;
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }
            .is-required {
                .el-form-item__label {
                    &:before {
                        content: "*";
                        display: inline-block;
                        color: #F56C6C;
                    }
                }
            }
        }
    }
}
</style>
